<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-表单验证</title>
    <style type="text/css">
      table {
        width: 80%;
      }
      th {
        width: 150px;
      }
      .spanred {
        color: red;
      }
      .spangreen {
        color: green;
      }
    </style>
    <script>
        window.onload = function () {
            // 检验用户名 光标消失绑定事件
            // 获取对象
            let unameEle = document.getElementById("uname");
            // 绑定事件
            unameEle.onblur = function () {
              // 获取到文本框的内容
              let unameValue = unameEle.value;
              // 校验数据是否合法
              var regExp = new RegExp(/^[A-Za-z0-9]{6,12}$/);
              var flag = regExp.test(unameValue);
              // 获取span对象
              let spanEle = document.getElementById("unameSpan");
              if(flag){
                  spanEle.style.color = "green";
                  spanEle.innerHTML = "用户名格式正确"
              }else{
                spanEle.style.color = "red";
                spanEle.innerHTML = "用户名格式错误"
              }
            }

            // 检验密码
          let pwdEle = document.getElementById("pwd");
          // 绑定事件
          pwdEle.onblur = function () {
            // 获取到文本框的内容
            let pwdValue = pwdEle.value;
            // 校验数据是否合法
            var regExp = new RegExp(/^[0-9]{5,10}$/);
            var flag = regExp.test(pwdValue);
            // 获取span对象
            let spanEle = document.getElementById("pwdSpan");
            if(flag){
              spanEle.style.color = "green";
              spanEle.innerHTML = "密码格式正确"
            }else{
              spanEle.style.color = "red";
              spanEle.innerHTML = "密码格式错误"
            }
          }

          // 校验确认密码
          let pwdEle2 = document.getElementById("pwd2");
          // 绑定事件
          pwdEle2.onblur = function () {
            // 获取到文本框的内容
            let pwdValue2 = pwdEle2.value;
            // 校验数据是否合法
            var regExp = new RegExp(/^[0-9]{5,10}$/);
            var flag = regExp.test(pwdValue2);
            // 获取span对象
            let spanEle2 = document.getElementById("pwd2Span");
            if(flag){
              spanEle2.style.color = "green";
              spanEle2.innerHTML = "确认密码格式正确"
            }else{
              spanEle2.style.color = "red";
              spanEle2.innerHTML = "确认密码格式错误"
            }
          }

          // 确认真是姓名
          let realnameEle = document.getElementById("realname");
          // 绑定事件
          realnameEle.onblur = function () {
            // 获取到文本框的内容
            let realnameValue = realnameEle.value;
            // 校验数据是否合法
            var regExp = new RegExp(/^[\u4e00-\u9fa5]{2,6}$/);
            var flag = regExp.test(realnameValue);
            // 获取span对象
            let spanEle = document.getElementById("realnameSpan");
            if(flag){
              spanEle.style.color = "green";
              spanEle.innerHTML = "真实姓名格式正确"
            }else{
              spanEle.style.color = "red";
              spanEle.innerHTML = "真实姓名格式错误"
            }
          }

          // 电子邮箱
          let emailEle = document.getElementById("email");
          // 绑定事件
          emailEle.onblur = function () {
            // 获取到文本框的内容
            let emailValue = emailEle.value;
            // 校验数据是否合法
            var regExp = new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/);
            var flag = regExp.test(emailValue);
            // 获取span对象
            let spanEle = document.getElementById("emailSpan");
            if(flag){
              spanEle.style.color = "green";
              spanEle.innerHTML = "电子邮箱格式正确"
            }else{
              spanEle.style.color = "red";
              spanEle.innerHTML = "电子邮箱格式错误"
            }
          }

        }
    </script>
</head>
<body>
<h1>表单数据验证</h1>
<form action="http://www.taobao.com" method="get" name='frm' onsubmit="return submit1()" onreset="return testReset();">
  <table border="1">
    <tr>
      <th>用户名</th>
      <td>
        <input type="text" id="uname" alt="用户名" name="uname"  onblur="checkName()" placeholder="请输入6-12位的字母或数字："/>
        <span id="unameSpan"></span>
      </td>
    </tr>
    <tr>
      <th>密码</th>
      <td>
        <input type="text" id="pwd" alt="密码" name="pwd" onblur="checkPwd()" placeholder="请输入5-10位的数字密码：" />
        <span id="pwdSpan"></span>
      </td>
    </tr>
    <tr>
      <th>确认密码</th>
      <td>
        <input type="password" id="pwd2" value="" placeholder="请再次输入密码确认：" onblur="reCheckPwd()"/>
        <span id="pwd2Span"></span>
      </td>
    </tr>
    <tr>
      <th>真实姓名</th>
      <td>
        <input type="text" id="realname" name="realname" alt="真实姓名" value="" onblur="checkRealName()" placeholder="请输入2-6位的汉字：" />
        <span id="realnameSpan"></span>
      </td>
    </tr>
    <tr>
      <th>电子邮箱</th>
      <td>
        <input type="text" id="email" name="email" alt="电子邮箱" value="" onblur="checkEmail()" placeholder="请输入电子邮箱："/>
        <span id="emailSpan"></span>
      </td>
    </tr>
    <tr>
      <th>手机号码</th>
      <td>
        <input type="text" id="phone" name="phone" alt="手机号码" value="" placeholder="请输入手机号：" onblur="checkPhone();" />
        <span id="phoneSpan"></span>
      </td>
    </tr>
    <tr>
      <th>性别</th>
      <td>
        <input type="radio" name="gender" value="1" checked />男
        <input type="radio" name="gender" value="2" />女
      </td>
    </tr>
    <tr>
      <th>爱好</th>
      <td>
        <input type="checkbox" name="fav" value="1" onclick="checkFav();" />足球
        <input type="checkbox" name="fav" value="2" onclick="checkFav();" />篮球
        <input type="checkbox" name="fav" value="3" onclick="checkFav();" />乒乓球
        <input type="checkbox" name="fav" value="4" onclick="checkFav();" />羽毛球
        <span id="favSpan"></span>
      </td>
    </tr>
    <tr>
      <th>户籍地址</th>
      <td>
        <select name="address" id="address" onchange="checkAddress();">
          <option value="">--请选择--</option>
          <option value="1">河南</option>
          <option value="2">河北</option>
          <option value="3">湖南</option>
          <option value="4">湖北</option>
        </select>
        <span id="addressSpan"></span>
      </td>
    </tr>
    <tr>
      <th>个人介绍</th>
      <td>
        <textarea id="intro" name="intro" rows="5" cols="80" alt="个人介绍" onblur="checkIntro();"></textarea>
        <span id="introSpan"></span>
      </td>
    </tr>
    <tr>
      <th>验证码</th>
      <td>
        <input type="text" id="code" size="4" maxlength="4" value="" placeholder="请输入正确的验证码：" onblur="checkCode()"/>
        <span id="randomCode" onclick="changeCode()"></span>
        <span id="codeSpan"></span>
      </td>
    </tr>
    <tr>
      <th colspan="2">
        <input type="checkbox" id="agree" /> 是否阅读并同意协议
      </th>
    </tr>
    <tr>
      <th colspan="2">
        <input type="submit" id="sub" value="提交"/>
        <input type="reset" value="重置" />
      </th>
    </tr>
  </table>
</form>
</body>
</html>